<template>
  <div class="container with-nav-padding">
    <div class="apply-panel">
      <div class="input-cell">
        <div class="input-title"><span class="mark">*</span>公司名称</div>
        <input
          v-model="company_name"
          placeholder="请输入公司名称"
          type="text"
        />
      </div>
      <div class="input-cell">
        <div class="input-title"><span class="mark">*</span>公司地址</div>
        <input
          v-model="company_addr"
          placeholder="请输入公司地址"
          type="text"
        />
      </div>
      <div class="input-cell">
        <div class="input-title"><span class="mark">*</span>联系电话</div>
        <input v-model="tel" placeholder="请输入联系电话" type="tel" />
      </div>
      <div class="input-cell">
        <div class="input-title"><span class="mark">*</span>营业执照</div>
        <img @click="img = ''" v-if="img" :src="img" alt="" class="lis-img" />
        <label v-else class="uploader" for="lis-upload">
          <img src="@/assets/商城首页-assets/tubiao.png" alt="" />
          <input
            type="file"
            id="lis-upload"
            @change="selectImg"
            style="position:absolute; clip:rect(0 0 0 0);"
            accept="image/*"
          />
        </label>
      </div>
    </div>
    <div class="immInviteBtn">
      <button class="copyInviteCode" @touchmove.stop @click="submit">
        立即申请
      </button>
    </div>
  </div>
</template>

<script>
import { fileUpload } from "@/api/file";
import { vipApply } from "@/api/vip";
export default {
  data() {
    return {
      img: "",
      company_name: null,
      company_addr: null,
      tel: null
    };
  },

  computed: {},

  watch: {},

  methods: {
    submit() {
      if (!this.company_name) {
        this.$dialog.toast({
          mes: "请输入公司名",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.company_addr) {
        this.$dialog.toast({
          mes: "请输入公司地址",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.tel) {
        this.$dialog.toast({
          mes: "请输入手机号",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.img) {
        this.$dialog.toast({
          mes: "请上传营业执照",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      vipApply({
        name: this.company_name,
        company_addr: this.company_addr,
        mobile: this.tel,
        img: this.img
      }).then(res => {
        if (res.status === 200) {
          this.$dialog.toast({
            mes: "提交成功，请耐心等待",
            icon: "succcess"
          });
          this.$router.go(-1);
        }
      });
    },
    selectImg(e) {
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      fileUpload(formData).then(res => {
        if (res.status === 200) {
          this.img = res.data.data.file;
        }
      });
    }
  },

  created() {},

  components: {}
};
</script>
<style lang="less" scoped>
.container {
  .apply-panel {
    font-size: 0.7rem;
    background: #fff;
    border-radius: 0.12rem;
    margin: 0.48rem;
    padding: 1rem;
    .input-cell {
      margin-bottom: 0.5rem;
      .input-title {
        .mark {
          color: red;
        }
      }
      input {
        margin-top: 0.5rem;
        width: 100%;
        background: #efefef;
        border-radius: 0.12rem;
        border: none;
        padding: 0.2rem 0.3rem;
        font-size: 0.6rem;
      }
    }
    .uploader {
      display: block;
      width: 100%;
      background-color: #e9e9e9;
      height: 7.2rem;
      border-radius: 0.2rem;
      text-align: center;
      padding-top: 2.5rem;
      margin-top: 0.5rem;
      img {
        width: 2.8rem;
      }
    }
    .lis-img {
      height: 7.2rem;
      width: 100%;
      object-fit: cover;
      border-radius: 0.2rem;
      margin-top: 0.5rem;
    }
  }
  .immInviteBtn {
    width: 100;
    height: 2rem;
    text-align: center;
    left: 0;
    position: fixed;
    bottom: 0rem;
    width: 100%;
    background: #fff;
    border-top: 1px solid #dfdfdf;
    padding: 0 3.2%;
    button {
      font-size: 0.64rem;
      color: #ffffff;
      background: linear-gradient(
        75deg,
        rgba(255, 154, 103, 1),
        rgba(255, 100, 95, 1)
      );
      border-radius: 0.24rem;
      width: 100%;
      border: none;
      height: 1.44rem;
      margin: 0.28rem 0;
    }
  }
}
</style>
